<template>
  <div class="page">
    <!-- 顶部栏 -->
    <van-nav-bar :border="false">
      <template #left>
        <div class="fz-16 fw-bold">{{ $t('首页') }}</div>
      </template>
      <template #right>
        <lang-comp></lang-comp>
      </template>
    </van-nav-bar>

    <div class="container rel pt-0">
      <!-- 钱包信息 -->
      <wallet-comp></wallet-comp>

      <!-- Tab切换 -->
      <ul class="flex flex-rb flex-wrap">
        <li
          class="btn click mt-15"
          :class="i === tabIndex ? 'active' : ''"
          v-for="(v, i) in tabs"
          :key="i"
          @click="onTabChange(i)"
        >
          {{ v }}
        </li>
      </ul>

      <!-- 订单 -->
      <order-comp
        :tabIndex="tabIndex"
        v-if="[0, 1, 2].includes(tabIndex)"
      ></order-comp>

      <!-- 购物 -->
      <buy-comp :tabIndex="tabIndex" v-else></buy-comp>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from '@/store/index'

import langComp from 'comps/lang.vue'
import walletComp from 'comps/wallet.vue'
import orderComp from 'comps/order.vue'
import buyComp from 'comps/buy.vue'

defineOptions({
  name: 'cache',
})

const router = useRouter()
const store = useStore()

const tabs = ref([
  $t('待确认订单'),
  $t('待收货订单'),
  $t('已收货订单'),
  $t('购物'),
  $t('期货'),
])
const tabIndex = ref(Number(localStorage.getItem('tabIndex') || '0'))

function onTabChange(i) {
  if (i === 4) {
    router.push('/forward/index')
  } else {
    tabIndex.value = i
    localStorage.setItem('tabIndex', tabIndex.value)
  }
}
</script>

<style lang="scss" scoped>
.page {
  position: relative;
  background: url('/bg.png') no-repeat center / cover;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba($color: #2f55ff, $alpha: 0.3);
  }
}
</style>
